<template>
<div class="likes-content">
    <!-- 搜索框 -->
    <div class="search-box">
        <van-search v-model="localSearchText" :placeholder="placeholder" shape="round" background="#f7f8fa"
            @input="onSearchInput" />
    </div>

    <!-- 消息列表 -->
    <div class="message-container">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list v-model="loading" :finished="!hasMore" finished-text="没有更多了" @load="loadMoreData">
                <div class="message-list">
                    <message-item v-for="(item, index) in filteredList" :key="index" type="user" :avatar="item.avatar"
                        :title="item.nickname" :time="item.time" :message="item.content" :show-post-preview="true"
                        :post-image="item.postImage" :post-title="item.postTitle" @click="goToUserProfile(item.userId)"
                        @post-click="goToPost(item.postId)" />

                    <!-- 无数据提示 -->
                    <div class="empty-list" v-if="filteredList.length === 0 && !loading">
                        <van-empty description="暂无点赞消息" />
                    </div>
                </div>
            </van-list>
        </van-pull-refresh>
    </div>
</div>
</template>

<script>
import MessageItem from '@/components/message/MessageItem.vue'

export default {
    name: 'LikesContent',
    components: {
        MessageItem
    },
    props: {
        searchText: {
            type: String,
            default: ''
        },
        placeholder: {
            type: String,
            default: '搜索点赞消息'
        }
    },
    data() {
        return {
            localSearchText: this.searchText,
            messageList: [],
            loading: false,
            hasMore: true,
            refreshing: false,
            page: 1,
            pageSize: 10
        }
    },
    computed: {
        // 过滤后的消息列表
        filteredList() {
            if (!this.localSearchText) {
                return this.messageList
            }

            const keyword = this.localSearchText.toLowerCase()
            return this.messageList.filter(item =>
                item.nickname.toLowerCase().includes(keyword) ||
                (item.content && item.content.toLowerCase().includes(keyword)) ||
                (item.postTitle && item.postTitle.toLowerCase().includes(keyword))
            )
        }
    },
    watch: {
        searchText(newVal) {
            this.localSearchText = newVal
        }
    },
    created() {
        this.loadInitialData()
    },
    methods: {
        // 加载初始数据
        loadInitialData() {
            if (this.messageList.length === 0) {
                this.loadMoreData()
            }
        },

        // 加载更多数据
        loadMoreData() {
            if (this.loading || !this.hasMore) return

            this.loading = true

            // 模拟API请求
            setTimeout(() => {
                // 模拟数据
                const mockData = Array(10).fill().map((_, index) => ({
                    userId: `user_${this.page}_${index}`,
                    nickname: `用户${this.page}_${index}`,
                    avatar: 'https://img01.yzcdn.cn/vant/cat.jpeg',
                    time: `${Math.floor(Math.random() * 24)}小时前`,
                    content: '赞了你的笔记',
                    postId: `post_${this.page}_${index}`,
                    postImage: 'https://img01.yzcdn.cn/vant/leaf.jpg',
                    postTitle: `这是一篇测试笔记标题 ${this.page}_${index}`
                }))

                this.messageList = [...this.messageList, ...mockData]
                this.page += 1
                this.hasMore = this.page < 5 // 模拟有5页数据
                this.loading = false

            }, 1000)
        },

        // 刷新数据
        onRefresh() {
            // 重置数据
            this.messageList = []
            this.page = 1
            this.hasMore = true

            // 加载新数据
            this.loadMoreData()

            // 完成刷新
            setTimeout(() => {
                this.refreshing = false
            }, 1000)
        },

        // 搜索输入
        onSearchInput() {
            this.$emit('search', this.localSearchText)
        },

        // 跳转到用户主页
        goToUserProfile(userId) {
            this.$router.push(`/user/${userId}`)
        },

        // 跳转到帖子详情
        goToPost(postId) {
            this.$router.push(`/post/${postId}`)
        }
    }
}
</script>

<style scoped>
.likes-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.search-box {
    padding: 8px 16px;
    background-color: #fff;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.message-container {
    flex: 1;
    overflow: hidden;
}

.message-list {
    background-color: #fff;
    padding: 0 16px;
    min-height: calc(100vh - 110px);
}

.empty-list {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 0;
}

/* 适配暗黑模式 */
@media (prefers-color-scheme: dark) {
    .search-box {
        background-color: #1e1e1e;
    }

    .message-list {
        background-color: #1e1e1e;
    }
}
</style>